*{box-sizing: border-box;}

 /*general*/
 body {background-color: #ececec;}
 button {display: block; margin: 1em auto; padding: 0.4em 0.6em; border-radius: 50px; border: none; text-align: center; cursor: pointer;}
 /*game*/
 #game-wrapper {position: relative; width: 50%; margin: 2em auto; padding-bottom: 2em; background-color: rgba(0,0,0,0.2); border-radius: 5px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4); background-image: url("/wp-content/themes/shmu-base-min v1/assets/img/fb/background.png");}
 #game-title {position: absolute; text-align: center; font-size: 4em; width: 100%; padding: 1em; opacity: 0.1; color: #fff; z-index: 5;}
 #game-title h3 {font-size: 1.15em; padding-top: 1em;}
 #game {position: relative; width: 400px; height: 500px; border: 1px solid rgba(0,0,0,0.3); margin: auto; overflow: hidden; background-color: #f8f8f8;}


/* scores */
 #scores {display: flex; align-items: center; justify-content: center; width: 400px; height: auto; margin: 0 auto;}
 #game-counter, #epic-score { display: flex; align-items: center; justify-content: center; width: 400px; height: 2em; margin: 0 auto; text-align: center; color: #fff; font-size: 2.5em; font-weight: 600;}

/* time */
#game-time {display: inline;}
#game-total {display: inline; font-size: 1.2em;}


 #game-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); border-radius: 5px; z-index: 2;}
 #jump {width: 400px; min-height: 2em; margin: 1.5em auto; text-align: center;}
 #jump button {width: 35%; margin: 5px auto;}
 #controls {position: absolute;}
 #result {position: absolute; width: 30%; left: 35%; top: 33.33%; height: auto; padding-top: 1.4em; text-align: center; background-color: #fff; z-index: 3; display: none;}
 #result-value {font-size: 1.725em;}
 #game-exit {position: absolute; width: 30%; left: 35%; top: 35%; height: 30%; padding-top: 1.4em; text-align: center; background-color: #fff; z-index: 4; display: none;}
 #start {position: absolute; display: flex; align-items: center; justify-content: center; width: 30%; left: 35%; top: 40%; height: 20%; text-align: center; border-radius: 5px; z-index: 4;}
 #start button {padding: 1em; border-radius: 100px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.14); font-weight: 600; font-size: 1.8em;}


 /*game elements*/
 #parallax-element {position: absolute; width: 420px; height: 100%; right: -440px; top: 0px; background-image: url("/wp-content/themes/shmu-base-min v1/assets/img/fb/parallax-bg.png"); background-size: contain; opacity: 0.1;}
 #moving-element {position: absolute; width: 18px; height: 150%; right: -20px; top: -25%; border-left: dashed 1px #ccc;}
 #block-one {position: absolute; width: 20px; height: 40%; background-color: blue;}
 #block-two {position: absolute; width: 20px; height: 40%; background-color: blue; bottom: 0;}
 #sprite {height: 20px; width: 20px; position: absolute; /*top: 100px;*/ left: 55px; background-color: green; border-radius: 50%; display: none;}